<template>
  <h1>(监听-watch)</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>爱好:{{aihao}}</h2>
  <h2>工资:{{aihao[3].j1.c}}</h2>
  <button @click="age++">修改年龄</button>
  <button @click="name+='!'">修改姓名</button>
  <button @click="updateAihao">修改爱好</button>
  <button @click="aihao[3].j1.c++">修改工资</button>
</template>

<script>
import { watch, ref, reactive } from 'vue'
export default {
  setup () {
    let age = ref(10)
    let name = ref('张三')
    const aihao = reactive(['抽烟', '喝酒', '烫头', {
      j1: {
        c: 20
      }
    }])
    // watch([name, age], (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // }, {
    //   immediate: true // 立即监听
    // })

    // // 监听reactive(Proxy)的引用数据类型中全部属性,但oldValue会出现问题(vue3的问题),并且强制开始了深度监视(deep配置无效)
    // watch(aihao, (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // }, {
    //   deep: false
    // })

    // 监听reactive(Proxy)引用数据类型中的某一个属性
    // watch(() => aihao[0], (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // }, {
    //   deep: false  // 配置无效(强制开启了deep)
    // })

    // 监听reactive(Proxy)引用数据类型中的某些属性
    // watch([() => aihao[0], () => aihao[1]], (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // }, {
    //   deep: true
    // })


    // 特殊情况
    // oldValue依旧有问题
    // watch(() => aihao[3], (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // }, { deep: true }) // 此处监视的是reactive元素中的某一个引用数据类型,所以deep配置有效
    function updateAihao () {
      aihao[0] = '学习'
    }

    return {
      age,
      name,
      aihao,
      updateAihao
    }
  }
}
</script>